<template>
	<div class="hot-articles-container">
		<div class="swiper" id="hotSwiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item, index) in data.hotArticle" :key="index">
					<el-card 
						v-for="(item2, index2) in item"
						:key="item2.id"
						:class="['article-card', { 'card-reverse': index2 == 1 }]"
						:data-swiper-parallax="index2 == 1 ? 100 : -100"
						data-swiper-parallax-opacity="0"
						shadow="hover"
						:body-style="{ padding: '0' }"
					>
						<div class="card-content">
							<div class="image-section">
								<el-image 
									:src="item2.postlink" 
									class="article-image"
									fit="cover"
									@click="goDerails(item2.id)"
								>
									<template #error>
										<div class="image-error">
											<el-icon :size="40" color="#c0c4cc">
												<icon-picture />
											</el-icon>
										</div>
									</template>
								</el-image>
								<div class="image-overlay">
									<div class="article-meta">
										<div class="meta-item">
											<el-icon><User /></el-icon>
											<el-link 
												@click.stop="router.push({ path: `user/${item2.userid}/article` })"
												type="primary"
												:underline="false"
												class="author-link"
											>
												{{ item2.name }}
											</el-link>
										</div>
										<div class="meta-item">
											<el-icon><Calendar /></el-icon>
											<span>{{ dayjs(item2.createdAt).format('YYYY-MM-DD') }}</span>
										</div>
										<div class="meta-item" v-if="item2.keywords">
											<el-icon><Collection /></el-icon>
											<el-tag size="small" type="info">{{ item2.keywords }}</el-tag>
										</div>
										<div class="meta-item">
											<el-icon><View /></el-icon>
											<span>{{ item2.readnumber }}</span>
										</div>
									</div>
								</div>
							</div>
							<div class="content-section">
								<div class="article-content">
									<h3 class="article-title" @click="goDerails(item2.id)">
										{{ item2.title }}
									</h3>
									<p class="article-intro">
										{{ item2.introduction }}
									</p>
									<div class="article-actions">
										<el-button 
											type="primary" 
											size="small" 
											plain
											@click="goDerails(item2.id)"
											class="read-more-btn"
										>
											阅读更多
											<el-icon class="el-icon--right"><ArrowRight /></el-icon>
										</el-button>
									</div>
								</div>
							</div>
						</div>
					</el-card>
				</div>
			</div>
			<div class="swiper-scrollbar"></div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, watch, ref } from 'vue';
import Swiper from 'swiper/bundle';
import { 
	Picture as IconPicture, 
	User, 
	Calendar, 
	Collection, 
	View, 
	ArrowRight 
} from '@element-plus/icons-vue';
import router from '../../router';
import dayjs from 'dayjs';

const myRead = ref(null);
const props = defineProps({
	allHotArticle: Array,
});
const data = reactive({
	hotArticle: [],
});
watch([props], ([newProps], [oldProps]) => {
	// fontDeno(newProps.firstData.description, newProps.firstData.title)
	data.hotArticle = group(newProps.allHotArticle, 2);
});
onMounted(() => {
	const mySwiper = new Swiper('#hotSwiper', {
		speed: 1500,
		autoplay: {
			pauseOnMouseEnter: true,
			disableOnInteraction: false,
		}, //可选选项，自动滑动
		parallax: true,
		grabCursor: true,
		observer: true,
		observeParents: true,
		scrollbar: {
			el: '.swiper-scrollbar',
		},
	});
	// if (props.allHotArticle[0] !== undefined) {
	//   data.hotArticle = group(props.allHotArticle, 3)
	// }
});
// function getUser(uid){
// 	window.href = 'http://127.0.0.1:9797/user/' + uid
// }
function group(array, num = 3) {
	let index = 0;
	let newArray = [];
	while (index < array.length) {
		newArray.push(array?.slice(index, (index += num)));
	}
	return newArray;
}

function goDerails(num) {
	router.push({ path: '/articleDetails', query: { id: num } });
}
</script>

<style scoped lang="less">
// Element Plus 默认蓝色主题色彩变量
@primary-color: #409eff;
@primary-light: #79bbff;
@primary-lighter: #a0cfff;
@primary-extra-light: #d9ecff;
@primary-dark: #337ecc;
@text-primary: #303133;
@text-regular: #606266;
@text-secondary: #909399;
@text-placeholder: #c0c4cc;
@border-color: #dcdfe6;
@bg-color: #f5f7fa;

.hot-articles-container {
	padding: 20px;
	background: linear-gradient(135deg, @primary-extra-light 0%, @primary-lighter 100%);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(64, 158, 255, 0.08);
}

:deep(.swiper-scrollbar-drag) {
	background: linear-gradient(90deg, @primary-color, @primary-light) !important;
	border-radius: 4px !important;
}

:deep(.swiper-scrollbar) {
	background: rgba(0, 0, 0, 0.05) !important;
	border-radius: 4px !important;
}

#hotSwiper {
	height: 480px;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;

	@media (max-width: 768px) {
		height: 400px;
		max-width: 100%;
	}

	.swiper-slide {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 8px;
	}
}

.article-card {
	height: 200px;
	border-radius: 12px !important;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid @primary-extra-light;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);

	&:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 40px rgba(64, 158, 255, 0.15);
		border-color: @primary-color;

		.article-image {
			transform: scale(1.05);
		}

		.image-overlay {
			opacity: 1;
			visibility: visible;
		}
	}

	&.card-reverse {
		.card-content {
			flex-direction: row-reverse;
		}
	}
}

.card-content {
	display: flex;
	height: 100%;
	gap: 0;
}

.image-section {
	position: relative;
	flex: 0 0 45%;
	overflow: hidden;
	border-radius: 8px 0 0 8px;

	.card-reverse & {
		border-radius: 0 8px 8px 0;
	}
}

.article-image {
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: transform 0.3s ease;
	object-fit: cover;
}

.image-error {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: linear-gradient(135deg, #f0f2f5, #e8eaed);
}

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(64, 158, 255, 0.9), rgba(121, 187, 255, 0.8));
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	backdrop-filter: blur(2px);
}

.article-meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: white;
	text-align: center;
	padding: 16px;
}

.meta-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

	.el-icon {
		font-size: 14px;
	}

	span {
		color: white;
	}
}

.author-link {
	color: white !important;
	font-weight: 600;
	transition: all 0.2s ease;

	&:hover {
		color: #ffd700 !important;
		transform: scale(1.05);
	}
}

.content-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: white;
}

.article-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 12px;
}

.article-title {
	font-size: 16px;
	font-weight: 600;
	color: @text-primary;
	line-height: 1.4;
	margin: 0;
	cursor: pointer;
	transition: color 0.2s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	&:hover {
		color: @primary-color;
	}
}

.article-intro {
	font-size: 13px;
	color: @text-regular;
	line-height: 1.6;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.article-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: auto;
}

.read-more-btn {
	font-size: 12px;
	font-weight: 500;
	border-radius: 20px;
	padding: 6px 16px;
	transition: all 0.3s ease;
	background: linear-gradient(135deg, @primary-color, @primary-light);
	border: none;
	color: white;

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
		background: linear-gradient(135deg, @primary-dark, @primary-color);
	}

	.el-icon {
		transition: transform 0.2s ease;
	}

	&:hover .el-icon {
		transform: translateX(2px);
	}
}

// 响应式设计
@media (max-width: 768px) {
	.hot-articles-container {
		padding: 12px;
	}

	.article-card {
		height: 160px;

		.card-content {
			flex-direction: column !important;
		}

		.image-section {
			flex: 0 0 60%;
			border-radius: 8px 8px 0 0;
		}

		.content-section {
			padding: 12px;
		}

		.article-title {
			font-size: 14px;
			-webkit-line-clamp: 1;
		}

		.article-intro {
			font-size: 12px;
			-webkit-line-clamp: 2;
		}
	}
}

// 动画效果
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.article-card {
	animation: fadeInUp 0.6s ease-out;
}
</style>
